<template>
    <div id="root">


        <router-link to="/" :class="{'navbar' :true,'higth-lighted' :path=='/'}">
        <div class="fa fa-home fa-fw"><span> <br>首页</span></div>
        </router-link>

        <router-link to="/classify" :class="{'navbar' :true,'higth-lighted' :path=='/classify'}">
        <div class="fa fa-list"><span> <br>分类</span></div>
        </router-link>

        <router-link to="/discover" :class="{'navbar' :true,'higth-lighted' :path=='/discover'}">
        <div class="fa fa-home fa-fw"><span><br>发现</span></div>
        </router-link>

        
        <router-link :to="userLogin?'/shopping':'/login'" :class="{'navbar' :true,'higth-lighted' :path=='/shopping'}">
        <div class="fa fa-shopping-cart"><span> <br>购物车</span><div><Badge text="1"></Badge></div></div>
        </router-link>

        <router-link :to="userLogin?'/mine':'/login'" :class="{'navbar' :true,'higth-lighted' :path=='/mine'}">
        <div class="fa fa-user-o"><span> <br>我的</span></div>
        </router-link>

    </div>
</template>

<script>
import {mapState} from "vuex";
import {Badge} from "vux";
export default {
    components: {
      Badge,  
    },
   computed: {
        path:function(){
            return this.$route.path;
        },
        ...mapState([
            "userLogin",
            "gross"
        ])
    
  }
}
</script>

<style scoped>
    #root{
        background-color:  	#FFC125;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        display: flex;
        
    }
    span{
        font-size: 15px;
    }
    .navbar{
        width: 20%;
        
    }
    .navbar div{
        width: 100%;
    }
    .higth-lighted{
        color:white;
    }
    .fa{
        font-size: 20px;
        margin-top: 5px;
    }

</style>